<template>
  <div class="friend-card">
    <div class="info-row">
     
      <img :src="info.room_info.head_image  || '/public/background_index.jpg'" alt="头像" class="avatar">
       <p class="group_name">{{info.room_info.group_name}}</p>
    </div>

  
    <div class="action-row">
      <button v-for="(i,index) in funccollections" :key="index"  class="action-btn chat-btn" 
      @click="i.onclick">
        {{i.name}}
      </button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, inject, onMounted } from "vue"
import { quit_group } from "@/api/chat/room.js"
const chat = inject('chat')()
const room_stream = inject('room_stream')
const room_cache = inject('cacahe_room_info')
const props = defineProps({
  info: {
    type: Object,
    required: true
  }
})
const startChat = () => {
  chat.value.set_current_chat({room_id:props.info.room_info.room_id,type:props.info.room_info.type})
  chat.value.add_current_chat_list(props.info.room_info.room_id,props.info)
}
const quitRoom = async() => { 
  const judge = await quit_group(chat.value.get_user_info().id, props.info.room_info.room_id)
  if (judge == 200) { 
    // 删除成功,执行缓存清除任务
    //清除源
    const maxRetries = 3; // 最大重试次数
    const delay = 1000; // 重试之间的延迟（毫秒）
    let retries = 0;
    let lastError = null;

    while (retries < maxRetries) {
      try {
        chat.value.pop_room_unrend_lastmessage_item(props?.info?.room_info?.room_id)
        chat.value.pop_current_chat_list_item(props?.info?.room_info?.room_id);
        chat.value.pop_group_list_item(props?.info?.room_info?.room_id);
        await room_stream.deleteData(props?.info?.room_info?.room_id);
        await room_cache.deleteData(props?.info?.room_info?.room_id);
        
        // 如果所有操作都成功，退出循环
        break; // 成功完成，退出循环
      } catch (error) {
        retries++;
        lastError = error;
        // console.error(`Attempt ${retries} failed:`, error.message);
        if (retries >= maxRetries) {
          // console.error('Max retries reached. Giving up.');
          throw lastError; // 达到最大重试次数，抛出错误
          break
        }
        // 等待一段时间后重试
        await new Promise(resolve => setTimeout(resolve, delay));
      }
    }
      }
    }
const showMore = () => {
  // 展开/更多逻辑
  chat.value.set_current_show_info_room_info(
    {
      room_id: props.info.room_info.room_id,
      type: props.info.room_info.type
    }
  )
}

const funccollections = [

  {

    'name': '发送消息',
    'icon':'',
     onclick: startChat,
  },
  {
    'name': '退出群聊',
    'icon':'',
     onclick: quitRoom,
  }, {
    'name': '更多',
    'icon':'',
     onclick: showMore,
  }
]
onMounted(() => { 
  // console.log(props.info)
})
</script>

<style scoped>
.friend-card {
  width: 150%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 12px;
  font-family: 'Arial', sans-serif;
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #f0f0f0;
}


.action-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-btn {
  background-color: #e6f7ff;
  color: #1890ff;
}

.chat-btn:hover {
  background-color: #bae7ff;
}

.more-btn {
  background-color: #f5f5f5;
  color: #666;
}

.more-btn:hover {
  background-color: #e8e8e8;
}

.icon {
  font-size: 14px;
}
.group_name{
  font-weight: bold;
  font-size: 15px;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>
